<template>
  <div class="content-wrapper">

    <i-cell title-class="cell-title" label-class="cell-label"
      :title="content.ProductName" :label="content.CategoryChar" only-tap-footer>
      <div class="product-content" style="display: block;">
        <span class='product-info' style="display: block;">
          <p class='info-tag'>产品协议：</p>
          <p class='info-content'>{{ content.ProtocolChar }}</p>
        </span>
        <span class='product-info' style="width: 300rpx;">
          <p class='device-tag'>设备数量：</p>
        <p class='info-content'>{{ content.DeviceNum }}个</p>
      </span>
        <span class='product-info' style="width: 300rpx;">
          <p class='device-tag'>在线数量：</p>
        <p class='info-content'>{{ content.OnlineNum }}个</p>
      </span>
      </div>
    </i-cell>

    <div class="search-header">
      <i-row>
        <i-col offset="2" span="17">
          <i-input maxlength="20" i-class="search-input" @change="searchBind" placeholder="设备名称或ID" />
        </i-col>
        <i-col offset="1" span="2">
          <i-icon @click='fetchList' type="search" size="28" color="#1EB4C5" />
        </i-col>
      </i-row>
    </div>

    <scroll-view class="device-list" scroll-y @scrolltolower="loadList">
      <div class="scroll-content" v-for="device in deviceList" :key="device.ID">
        <i-cell title-class="cell-title" @click='toDevice(device.ID)'
          :title="device.DeviceName" only-tap-footer is-link>
          <i-icon class='online-icon' size="40" type="emoji" slot="icon" 
          :style="device.Online ? 'color:#33DEB4;' : 'color:#999;'"/>
          <div class="device-content" style="display: block;">
            <span class='product-info' style="width: 200rpx;">
              <p class='info-tag' style="width: 120rpx;">设备ID：</p>
              <p class='info-content'>{{ device.ID }}</p>
            </span>
            <span class='product-info' style="width: 240rpx">
              <p class='info-tag'>设备状态：</p>
              <p class='info-content' style="color: #999;">{{ device.Status ? '启用' : '禁用' }}</p>
            </span>
            <span class='product-info' style="width: 440rpx;">
              <p class='info-tag'>创建时间：</p>
              <p class='info-content' style="color: #999;">{{ device.CreatedAt }}</p>
            </span>
          </div>
        </i-cell>
      </div>

      <i-load-more v-if='loadSpin' />

      <i-divider content="暂无其他数据" v-if='nomore'></i-divider>

    </scroll-view>

  </div>
</template>

<script>

import store from '../store/store'
import { request } from '@/utils/index'
import { transCategory, transProtocol } from '@/utils/dict'

const { $Message } = require('../../../static/dist/base/index')

export default {
  data () {
    return {
      productID: 0,
      content: [],
      searchInput: '',
      currentPage: 1,
      pageSize: 5,
      totalNum: 0,
      deviceList: [],
      loadSpin: false,
      nomore: false
    }
  },
  onLoad (options) {
    this.productID = options.productID
    this.fetchData()
    this.fetchList()
  },
  methods: {
    fetchData () {
      var target = `/api/v1/product/detail?id=${this.productID}`
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: ids.message, type: 'error' })
          return false
        }
        this.content = this.dataProcess(ids.data)
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    fetchList () {
      this.nomore = false
      this.currentPage = 1
      var target = `/api/v1/device/list?pid=${this.productID}&offset=${this.currentPage - 1}&limit=${this.pageSize}`
      if (this.searchInput !== '') {
        target += `&search=${this.searchInput}`
      }
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: ids.message, type: 'error' })
          return false
        }
        this.totalNum = ids.data.total
        this.deviceList = ids.data.row
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    loadList () {
      if (this.pageSize * this.currentPage <= this.totalNum) {
        this.loadSpin = true
        this.currentPage += 1
        var target = `/api/v1/device/list?pid=${this.productID}&offset=${this.currentPage - 1}&limit=${this.pageSize}`
        if (this.searchInput !== '') {
          target += `&search=${this.searchInput}`
        }
        request(target, { token: this.token }, 'GET').then((ids) => {
          if (ids.code !== 200) {
            $Message({ content: '请求错误，请重试', type: 'error' })
            return false
          }
          var self = this
          setTimeout(function () {
            self.deviceList = self.deviceList.concat(ids.data.row)
            self.totalNum = ids.data.total
            self.loadSpin = false
            if (ids.data.row.length === 0) {
              self.nomore = true
            }
          }, 700)
        }, (e) => {
          $Message({ content: '请求错误，请重试', type: 'error' })
          return false
        })
      }
    },
    searchBind (e) {
      this.searchInput = e.mp.detail.detail.value
    },
    dataProcess (data) {
      data.CategoryChar = transCategory(data.Category)
      data.ProtocolChar = transProtocol(data.Protocol)
      return data
    },
    toDevice (ID) {
      wx.navigateTo({
        url: `../deviceDetail/main?deviceID=${ID}&productID=${this.productID}`
      })
    }
  },
  computed: {
    token () {
      return store.state.token
    }
  }
}
</script>

<style>
.content-wrapper {
  height: 100%;
}
.product-info .device-tag {
  color: #999;
  width: 150rpx;
}
.search-header{
  margin: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-header i-row{
  width: 100%;
}
.search-input{
  height: 40rpx;
  display: inline-block;
  border-radius: 50rpx;
  box-shadow: 0 1px 3px rgba(26,26,26,.1);
}
.online-icon {
  margin-right: 20rpx;
}
.device-list {
  height: calc(100% - 340rpx + 260rpx);
}
.scroll-content {
  margin-bottom: 20rpx;
}
</style>